<!--  -->
<template>
  <div>
    <el-dialog
    v-model="dialogShow"
    title="获取经纬度"
    width="800"
    
  >
    map {{ selectLngLat }}
    <input id="input" />
    <div class="panel" id="panel"></div>
    <div id="mymap" style="width: 100; height: 400px"></div>

    <el-button type="primary" @click="submit">确定</el-button>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted,defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const emits=defineEmits(["sendlnglat"]);

const submit=()=>{
    emits("sendlnglat",selectLngLat.value);
}

window._AMapSecurityConfig = {
  securityJsCode: "2cbe1a720ff18fae308d96736f2c9f5c", // 应用生成的秘钥
};

const dialogShow=ref(true);

const state = reactive<any>({
  map: null,
  placesearch: null,
  autocomplete: null,
});

const selectLngLat=ref<any>([]);

//初始化地图
const initMap = async () => {
  const AMap = await AMapLoader.load({
    key: "71e6ada2ae601b96445a1c4bb40989a4",
    version: "2.0",
    plugins: [
      "AMap.ToolBar",
      "AMap.Scale",
      "AMap.Geolocation",
      "AMap.HawkEye",
      "AMap.ControlBar",
      "AMap.Marker",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
    ],
  });

  //地图挂载到页面

  state.map = new AMap.Map("mymap", {
    // 设置地图容器id
    viewMode: "3D", // 是否为3D地图模式
    zoom: 12, // 初始化地图级别
    center: [116.397428, 39.90923], // 初始化地图中心点位置
  });

  //       state.map.on("click", function (ev:any) {

  //         console.log(ev);

  // //   var lnglat = ev.lnglat;

  // });

  //添加缩放工具条
  const toolBar = new AMap.ToolBar({
    position: {
      top: "10px",
      right: "10px",
    },
  });
  state.map.addControl(toolBar);

  //添加比例尺
  const scale = new AMap.Scale();

  state.map.addControl(scale);

  //添加定位

  const geolocation = new AMap.Geolocation({
    position: {
      left: "10px",
      top: "10px",
    },
  });
  state.map.addControl(geolocation);

  //添加鹰眼

  const hawkEye = new AMap.HawkEye();
  state.map.addControl(hawkEye);

  //添加方向盘

  const controlBar = new AMap.ControlBar();
  state.map.addControl(controlBar);

  //添加点标记

  const position = new AMap.LngLat(116.397029, 39.917839); // Marker经纬度
  const content = `<div><img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"></div>`;
  const marker = new AMap.Marker({
    position,
    content: content,
    offset: new AMap.Pixel(-24, -34),
  });
  state.map.add(marker);

  //地图搜索

  state.autocomplete= new AMap.AutoComplete({
    input: "input",
    city:"北京"
  });



 state.placesearch= new AMap.PlaceSearch({
    pageSize: 5,
    pageIndex:1,
    city:"北京",
    citylimit: true, 
    map:state.map,
    panel: "panel",
    autoFitView: true
  });



  state.autocomplete.on("select",(e:any)=>{

 
state.placesearch.search(e.poi.name);

})

state.placesearch.on("markerClick",(e:any)=>{

    console.log(999,e);

    selectLngLat.value=[e.data.location.lng, e.data.location.lat];

    const position = new AMap.LngLat(e.data.location.lng, e.data.location.lat); // Marker经纬度
  const marker = new AMap.Marker({
    position: position,
    zIndex:2147483648,
    offset: new AMap.Pixel(-0, -0), // 以 icon 的 [center bottom] 为原点
  });
 
  state.map.add(marker); //将Marker添加到地图上

    

})



//   state.placesearch = new AMap.PlaceSearch({
//     pageSize: 5, // 单页显示结果条数
//     pageIndex: 1, // 页码
//     city: "北京", // 兴趣点城市
//     citylimit: true, //是否强制限制在设置的城市内搜索
//     map: state.map, // 展现结果的地图实例
//     panel: "panel", // 结果列表将在此容器中进行展示。 panel为div id
//     autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
//   });

//   //  state.placesearch.on("click",(e:any)=>{

//   //     console.log(11111111,e);

//   //  })

//   state.placesearch.on("markerClick", function (e: any) {
//     console.log(9999999,e);
    
//     // 根据点击marker进行下一步
//     console.log(11111111, e.data.location.lng);
//     console.log(11111111, e.data.location.lat);
//     const position = new AMap.LngLat(e.data.location.lng, e.data.location.lat); // Marker经纬度
//     const marker = new AMap.Marker({
//       position: position,
//       zIndex: 2147483648,
//       offset: new AMap.Pixel(-0, -0), // 以 icon 的 [center bottom] 为原点
//     });
//     state.map.add(marker); //将Marker添加到地图上
//   });

//   state.autocomplete = new AMap.AutoComplete({
//     city: "北京",
//     input: "input",
//   });

//   state.autocomplete.on("select", function (e: any) {
//     state.placesearch.search(e.poi.name);
//   });
};
onMounted(() => {
  initMap();
});
</script>
<style scoped>
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
  z-index: 999;
}
</style>
